<template>
    <div class="action-sheet" @click="hideActionSheet">
        <ul class="action-sheet-list" :class=" show : isShowList">
            <li v-for="(item,index) in store.state.actionSheetConfig.list" :key="index" @click="clickHandler(index)" >
            {{item}}
            </li>
        </ul>

    </div>
</template>

<script>
import { onMounted } from '@vue/runtime-core'
import { useStore } from 'vuex'
export default {
    name:'ActionSheet',
    setup () {
        const store=useStore()

       

    function hideActionSheet(){
        store.commit("hideActionSheet")
    }
    function clickHandler(index){
        if(typeof store.state.actionSheetConfig.successCallBack==='function'){
            store.state.actionSheetConfig.successCallBack(index)
        }

}

 let isShowList=ref(false)
onMounted(()=>{
    setTimeout(()=>{
        isShowList.value='true'
    },100)
})


        return {store,isShowList,hideActionSheet,clickHandler}
    }
}
</script>

<style lang="scss" scoped>
.action-sheet{
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    .action-sheet-list{ 
        background-color: gray;
        position: absolute;
        width: 100%;
        bottom:0;
        left: 0;
        transform: translateY(-100%);
        transition: all 300ms linear;
        li{ 
            height: 35px;
            text-align: center;
            line-height: 35px;
            &:last-child{
                margin-top: 5px;
            }
        
        }
        
        &.show{ 

        }
    }
}

</style>